<template>

    <div>

        <!-- 
            header-ceiling:是否吸顶
            header-color:头部导航颜色
            footer-regular:是否固定在底部
            footerer-color:底部导航栏颜色
         -->
        <page-container 
        :header-ceiling="pageConfig.header.ceiling"
        :header-ceiling-color="pageConfig.header.ceilingColor"
        :header-regular="pageConfig.header.regular"
        :header-color="pageConfig.header.background"
        :footer-regular="pageConfig.footer.regular"
        :footer-color="pageConfig.footer.background"
        >
            <template v-slot:content>
                <carousel :config="config" :list="carouselList" @handler="gotoCarouselItem"></carousel>
                <section-title title="最新公告" size="max"></section-title>

                <div style="display: flex;justify-content: center;">
                    <div style="width: 1200px;">
                    
                        <div v-for="(item,index) in newNoticeList " :key="index" style="padding: 20px;border: 1px solid #dcdfe6;margin-bottom: 10px;">
                            <div style="font-size: 20px;font-weight: 600;">
                                {{ item.theme }}
                            </div>
                            <div style="display: flex;justify-content:flex-start;color: #999;margin-top: 10px;margin-bottom: 20px;font-size: 14px;">
                                <div>发布者:{{ item.publisherName }}</div>
                                <div style="margin-left: 10px;">发布时间:{{ item.createTime }}</div>
                            </div>
                            <div>
                                {{ item.content }}
                            </div>
                        </div>
 
                    </div>
                </div>
                
                <div>
                    <section-title title="最新博文" size="max"></section-title>
                    <div class="data-mian">
                        <div class="data-list" >
                            <!-- <data-list :data-list="newBlogList" @handler="gotoBlogItem"></data-list> -->
                            <records :data-list="newBlogList" @record="gotoBlogItem"></records>
                        </div>
                    </div>
                    <div class="comments-head" @click="$router.push('/blog')">
                        <p>查看更多<i class="el-icon-right" ></i></p>
                    </div>
                </div>
                <div>
                    <section-title title="最新竞赛" size="max"></section-title>
                    <div class="data-mian">
                        <div class="data-list" style="border: 1px solid #dcdfe6;width: 1200px;">
                            <data-list :data-list="newMatchList" @handler="marchHandler"></data-list>
                        </div>
                    </div>
                    <div class="comments-head" @click="$router.push('/match')">
                        <p>查看更多<i class="el-icon-right"></i></p>
                    </div>
                </div>
                
                
                
                
            </template>
        </page-container>
        
    </div>
  
</template>

<script>

import NavHeader from '@/components/plugs/nav-header/NavHeader';
import NavFooter from '@/components/plugs/nav-footer/NavFooter';
import Carousel from '@/components/plugs/carousel/Carousel';
import SectionTitle from '@/components/plugs/section-title/SectionTitle';
import DataList from '@/components/plugs/data-list/DataList';
import GoTop from '@/components/plugs/go-top/GoTop';
import PageContainer from '@/components/container/page-container/PageContainer';
import {post,get} from '@/utils/api'
import Records from '@/components/plugs/records/Records.vue';

export default {
    data(){
        return{
            pageConfig:{
                header:{
                    regular:true,
                    ceiling:true,
                    background:'transparent',
                    ceilingColor:'#1E171F'
                },
                footer:{
                    regular:true,
                    background:'#1E171F'
                }
            },
            config:{
                height:'700',
                time:1600
            },
            newBlogList:[],
            newMatchList:[],
            newNoticeList:[],
            carouselList:[
                {url:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-about.jpg',title:'不塞不流，不止不行'},
                {url:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-blog.jpg',title:'它山之石，可以攻玉'},
                {url:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-cart.jpg',title:'靡不有初，鲜克有终'},
                {url:'https://tohone.oss-cn-guangzhou.aliyuncs.com/def/carousel/bread-bg-contact.jpg',title:'星星之火，可以燎原'}
            ]
           
        }
    },
    methods:{
        gotoBlogItem(data){
            
            this.$router.push(`/blog/details/${data.id}`);
        },
        gotoCarouselItem(index,data){
            console.log(`index:${index}`);
            console.log(`data:${data}`);
        },
        getNewBlog(){

            const promise = get({
                url:'/base-blog/front/blog/new/list'
            },false);

            promise.then(res=>{
                if(res&&res.code === 200){
                    // console.log('newBlogList',res.data);
                    this.newBlogList = res.data;
                }
            })

        },
        getNewMatch(){
            const promise = get({
                url:'/base-match/front/match/new/list'
            },false);

            promise.then(res=>{
                if(res&&res.code === 200){
                    console.log('newMatchList',res.data);
                    this.newMatchList = res.data;
                }
            })

        },
        getNewNoticeList(){
            const promise = get({
                url:'/base-system/front/notice/get/new/list'
            },false);


            promise.then(res=>{
                if(res&&res.code === 200){
                    this.newNoticeList = res.data;
                }
            })
        },
        marchHandler(index,data){
            this.$router.push(`/match/details/${data.id}`)
        }
        
    },
    created(){
        this.getNewNoticeList();
        this.getNewBlog();
        this.getNewMatch();
    },
    components:{
        'page-container':PageContainer,
        'nav-header':NavHeader,
        'nav-footer':NavFooter,
        'carousel':Carousel,
        'section-title':SectionTitle,
        'data-list':DataList,
        'go-to':GoTop,
        Records
    }
    

}
</script>

<style scoped>
.comments-head{
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #FF6900;
    text-transform: uppercase;
    letter-spacing: 4px;
    animation: fadeInLeft 1s;
    cursor: pointer;
    
}
.index-main{
    overflow: hidden;
    background-color: #fff;
    
}
/* .header-main{
    width: 100%;
    position: absolute;
    z-index: 99;
    top: 0;
    padding: 15px 0;

} */
.body-mian{
    background-color: #fff;
}
.data-mian{
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    
}
.data-list{
    width: 1200px;

}
.footer-main{
    background-color: #1E171F;

}
</style>